<template>
  <div class="hidden-md-and-up" style="display: flex;justify-content: center;align-items: center;height: 100%;width: 100%">
    <h2>抱歉，此页面不支持手机使用</h2>
  </div>
  <el-container class="admin_home hidden-sm-and-down">
    <el-aside width="200px">
      <div
          style="cursor: pointer;line-height: 60px;height: 59px;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #ccc">
        <img @click="toHomeBtn" src="../../assets/logo.png" style="width: 150px;height: 40px" alt="">
      </div>
      <!--      侧边栏-->
      <div style="background: white;height: calc(100% - 60px);">
        <el-row style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <el-menu
                router
                :default-active="path"
                style="height: 100%"
            >
              <template v-for="item in menuList">
                <el-menu-item v-if="item.group === false" :index="item.index">
                  <span v-if="item.language === 'zh'">{{ item.title }}</span>
                  <span v-else>{{ item.en_title }}</span>
                </el-menu-item>
                <el-sub-menu v-else :index="item.index">
                  <template #title>
                    <span v-if="item.language === 'zh'">{{ item.title }}</span>
                    <span v-else>{{ item.en_title }}</span>
                  </template>
                  <el-menu-item-group v-if="item.language === 'zh'" :title="item.title">
                    <template v-for="child_item in item.groupList">
                      <el-menu-item :index="child_item.path">{{ child_item.title }}</el-menu-item>
                    </template>
                  </el-menu-item-group>
                  <el-menu-item-group v-else :title="item.en_title">
                    <template v-for="child_item in item.groupList">
                      <el-menu-item :index="child_item.path">{{ child_item.en_title }}</el-menu-item>
                    </template>
                  </el-menu-item-group>
                </el-sub-menu>
              </template>

            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-aside>

    <el-container>
      <el-header style="border-bottom: 1px solid #cccccc">
        <div style="height: 100%;display: flex;justify-content: space-between">
          <div style="line-height: 60px">
            <!--            顶部菜单-->
            <el-button size="small" @click="toWebHomeBtn">{{ $t('message.menuHome') }}</el-button>
          </div>
          <!--          多语言-->
          <div style="line-height: 60px;display: flex;align-items: center">
            <el-dropdown>
              <span style="cursor: pointer;display: flex;align-items: center;padding-right: 20px">
                <el-icon style="padding-right: 5px"><tools/></el-icon>
                {{ $t('message.language') }}
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="chineseBtn">中文</el-dropdown-item>
                  <el-dropdown-item @click="englishBtn">English</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div>
              <el-button size="mini" @click="loginOutBtn">退出</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <el-main style="height: 100%;background: white">
        <router-view></router-view>
      </el-main>
      <el-footer>
        <div style="height: 60px;display: flex;justify-content: center;align-items: center">
          Z-Blog
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {Tools} from '@element-plus/icons'
import AdminHome from "./AdminHome";

export default {
  name: "AdminHome",
  components: {
    Tools
  },
  setup() {

    return {
      ...AdminHome()
    }
  }
}
</script>

<style scoped>
.admin_home {
  height: 100%;
  min-width: 1500px;
  user-select: none;
}
</style>